<template>
  <div id="app">
    <transition name="fade">
      <keep-alive>
        <router-view :key="key"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        isLogin: false,
        userInfo: { // 保存用户信息
          nick: null,
          ulevel: null,
          uid: null,
          portrait: null
        }
      }
    },
    mounted () {
      // 组件开始挂载时获取用户信息
      this.getUserInfo();
    },
    computed: {
      key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
      }
    },
    methods: {
      // 请求用户的一些信息
      getUserInfo () {
        // 发送http请求获取，这里写死作演示
        this.userInfo = {
          nick: 'Doterlin',
          ulevel: 20,
          uid: '10000'
        };

        // 提交mutation到Store
        this.$store.commit('updateUserInfo', this.userInfo);
      }
    }
  };
</script>

<style>
  #app {
    width: 100%;
    background-color: #fff;
  }
</style>
